<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>实现帖子的增删</title>
	</head>
	<style>
		.big{border:1px solid black;width:500px;margin:50px auto;}
		.small{border:1px solid red;width:480px;height:52px;margin:8px;}
		.btn{margin:10px;}
		span{margin-left:200px;}
		a:hover{cursor:pointer;}
	</style>
	<body>
		<div class="big">
			<div class="small">
				<input type="text" name="" id="message" 
				style="height:46px;width:476px;outline:none;line-height:40px;font-size:42px;" />
			</div>
			<button class="btn" id="btn">发帖</button>
			
			<div id="content"></div>
		</div>
	</body>
	<script>
		function getDate(){
			let today = new Date();
			let nowDate = today.getFullYear()+"-"+(today.getMonth()+1)+"-"+today.getDate()
				+" "+today.getHours()+":"+today.getMinutes()+":"+today.getSeconds();
			return nowDate;
		}
		let time =getDate();;
		for(let key in localStorage){
			if(localStorage.hasOwnProperty(key))
				createPragraph(localStorage.getItem(key),key)
		}
		function createPragraph(inputVal,key){
			let content = document.getElementById("content");
			let p = document.createElement("p");
			p.innerHTML = inputVal;
			content.insertBefore(p,content.children[0]);
			let span = document.createElement("span");
			span.innerHTML = getDate();
			p.appendChild(span);
			
			let node = document.createElement("a");
			node.innerHTML = "删除";
			p.appendChild(node);
			node.onclick = function(){
				content.removeChild(p);
				localStorage.removeItem(key);
			}
		}
		document.getElementById("btn").addEventListener("click",function(){
			let inputVal = document.getElementById("message").value;
			if (!inputVal.trim()) {
				alert("输入不能为空！");
				return false;
			}
			let key = Date.now().toString();
			localStorage.setItem(key,inputVal);
			createPragraph(inputVal,key);
		})
	</script>
</html>
